<template>
  <div class="main flex between">
    <div class="main-left">
      <div class="left-div1">
        <div class="title title1">考勤信息</div>
        <div class="div1-con">
          <div>全班：{{ detail?.attendance_info?.total }}人</div>
          <div>实到：{{ detail?.attendance_info?.attendance_num }}人</div>
          <div>请假：{{ detail?.attendance_info?.leave_num }}人</div>
          <div>旷课：{{ detail?.attendance_info?.absence_num }}人</div>
        </div>
      </div>
      <div
        class="left-div2"
        @click="dialogVisible = true"
      >
        考勤打卡
      </div>
    </div>
    <div class="main-right">
      <div class="title">学生信息</div>
      <div class="ri-con">
        <el-scrollbar style="height: 100%">
          <div class="nameList flex align">
            <template v-if="detail?.student_list?.length">
              <div
                class="item"
                v-for="(item, index) in detail.student_list"
                :key="index"
              >
                <template v-if="item.face_image">
                  <img
                    class="avatar"
                    :src="item.face_image"
                  />
                </template>
                <template v-else>
                  <div class="avatar">
                    <img :src="require('@/assets/avatar01.png')" />
                  </div>
                </template>

                <div>{{ item.name }}</div>
              </div>
            </template>
            <template v-else>
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <el-empty description="暂无数据" />
              </div>
            </template>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <DialogFace
      v-model="dialogVisible"
      @close="dialogClose"
      :user-type="1"
    />
  </div>
</template>
<script setup>
import DialogFace from "@/components/DialogFace/index.vue";
import { ElEmpty, ElScrollbar } from "element-plus";
import { clazz } from "@/api/apiData";
import { onMounted, ref, inject, computed } from "vue";
const { deviceDetail } = inject("global-stroe");
const detail = ref();
const dialogVisible = ref(false);
const dialogClose = () => {
  getData();
};

onMounted(() => {
  getData();
});
function getData() {
  // console.log(deviceDetail.value);
  const room_id = deviceDetail.value?.room_id;
  // console.log("room_id", room_id);
  clazz.room
    .getClassRoomInfo({
      room_id,
    })
    .then(({ data }) => {
      console.log("data", data);
      detail.value = data;
    });
}
</script>
<style
  lang="less"
  scoped
>
.main {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .main-left {
    width: 660px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .left-div1 {
      flex: 1;
      background: white;
      .title1 {
        background: linear-gradient(to right, #fe9a14, #fe774a);
      }
      .div1-con {
        padding: 31px;
        font-size: 32px;
        width: fit-content;
        margin: 0 auto;
        div {
          margin-bottom: 32px;
        }
      }
    }
    .left-div2 {
      margin-top: 20px;
      font-size: 42px;
      background: linear-gradient(to right, #9e4bfd, #7747ff);
      color: white;
      text-align: center;
      padding: 70px 0;
      border-radius: 4px;
    }
  }
  .main-right {
    width: 1200px;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .title {
      background: linear-gradient(to right, #56abf9, #5686fc);
    }
    .ri-con {
      flex: 1;
      overflow: hidden;
      background: white;
    }
    .nameList {
      padding: 25px 20px;
      /*  display: grid; */
      text-align: center;
      font-size: 28px;
      flex-wrap: wrap;
      .item {
        margin-bottom: 20px;
        font-size: 16px;
        width: 10%;
        text-align: center;
        .avatar {
          width: 90%;
          height: 100px;
          border-radius: 4px;
          object-fit: cover;
          background: #d5e3ff;
          display: flex;
          align-items: center;
          justify-content: center;
          & > img {
            width: 70%;
            height: 70%;
          }
        }
      }
    }
  }
}
</style>
